<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <script src="./js/template-web.js"></script>
    <script src="./js/ajax.js"></script>
    <link rel="stylesheet" href="./css/head.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>

<body>

    <!-- 头部 -->
    <header>
        <div class="jianjianhead-size">
            <div class="jianjian-headsizebar">
                <div>
                    <a href="/">
                        <img class="jianjian-img" src="./images/index/jianjian-logo.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="/list.html"><span>所有商品</span></a>
                </div>
                <div>
                    <a href="#"><span>新品</span></a>
                </div>
                <div>
                    <a href="#"><span>无线</span></a>
                </div>
                <div>
                    <a href="#"> <span>HiFi</span></a>
                </div>
                <div>
                    <a href="#"><span>降噪</span></a>
                </div>
                <div>
                    <a href="#"><span>耳机配件</span></a>
                </div>
                <div>
                    <a href="#"><span>会员待遇</span></a>
                </div>
                <div>
                    <a href="/activity.html"><span>企业购</span></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="新品上市">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-yonghu">
                            <img src="./images/index/用户.png">
                            <ul class="jianjian-yonghuyc">
                                <!-- 登录状态不同样式 -->
                                <script id="head-login" type="text/html">
                                    {{if uid}}
                                    <div>
                                        <li class="item first">
                                            <span style="font-size: 16px;">欢迎<label
                                                    style="color: #0096D1;">{{uname}}</label></span>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">个人中心</a>
                                        </li>
                                        <li class="item">
                                            <a href="/user.html" style="font-size: 16px;">我的订单</a>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li class="item">
                                            <button onclick="back()" class="jianjian-btn2">退出登录</button>
                                        </li>
                                    </div>
                                    {{else}}
                                    <div>
                                        <li>
                                            <p style="font-size: 5px;">已是会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn">登录</button>
                                        </li>
                                        <li>
                                            <hr>
                                        </li>
                                        <li>
                                            <p style="font-size: 5px;">注册会员</p>
                                        </li>
                                        <li>
                                            <button onclick="to_login()" class="jianjian-btn2">注册</button>
                                        </li>
                                    </div>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li class="jianjian-gouwuche">
                            <img src="./images/index/购物车.png" alt="">
                            <ul class="jianjian-gouwucheyc">
                                <!-- 购物车不同状态 -->
                                <script id="head-cart" type="text/html">
                                    {{if data}}
                                    {{each data}}
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <div>
                                                <img class="jianjian-img-1" src="{{$value.img1}}">
                                            </div>
                                            <div class="product_name">
                                                {{$value.pname}}
                                            </div>
                                            <div>
                                                <p style="font-size: 16px;">¥{{$value.price}}</p>
                                            </div>
                                            <div class="jianjian-yc">
                                                <a href="javascript:;" onclick="cart_delete({{$value.cart_id}})">
                                                    <img src="./images/index/删 除.png">
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                    {{/each}}
                                    <li>
                                        <hr>
                                    </li>
                                    <li>
                                        <div class="jianjian-gouwucheyc2">
                                            <span>共{{allPnum}}件商品</span>
                                            <span style="color: #36d; font-size: 18px;">¥{{allPrice}}</span>
                                        </div>
                                    </li>
                                    <li>
                                        <button onclick="go_cart()" class="btn-gouwuche">结算</button>
                                    </li>
                                    {{else}}
                                    <li><img src="./images/index/购物车 (1).png"></li>
                                    <li>
                                        <p style="font-size: 9px; color: grey;">您的购物车还没有商品，赶紧选购吧~</p>
                                    </li>
                                    {{/if}}
                                </script>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="jianjianhead-sizeyc">
            <div class="jianjian-headsizebaryc">
                <div>
                    <a href="#"><img src="./images/index/jianjian-logo.png"></a>
                </div>
                <div>
                    <div>
                        <input type="text" placeholder="IE 100 PRO">
                        <img src="./images/index/搜索 (1).png">
                    </div>
                    <p style="color: gray; font-size: 15px;">大家都在搜</p>
                    <div class="jianjian-text">
                        <a href="#">
                            <p>新品</p>
                        </a>
                        <a href="#">
                            <p>MOMENTUM</p>
                        </a>
                        <a href="#">
                            <p>游戏</p>
                        </a>
                        <a href="#">
                            <p>GSP600</p>
                        </a>
                        <a href="#">
                            <p>真无线二代</p>
                        </a>
                        <a href="#">
                            <p>IE800</p>
                        </a>
                    </div>
                </div>
                <div>
                    <a id="close" href="javascript:;">
                        <img src="./images/index/叉.png">
                    </a>
                </div>
            </div>
        </div>

    </header>

    <table></table>
    <div class="container1">
        <div class="detail">
            <div class="top">
                <div class="ty dx">
                    <img id="img_m" src="">
                    <div class="mask" style="display: none;"></div>
                </div>
                <div class="big" style="display: none;">
                    <img id="img_x" src="" />
                </div>
            </div>
            <div class="top_2">
                <div>
                    <h3 data-pid="" id="pname"></h3>
                    <p>¥<span id="price"></span></p>
                </div>
                <div>
                    <p>颜色</p>
                    <a href="javascript:;"><span id="type">黑色</span></a>
                </div>
                <div>
                    <p>花呗</p>
                    <a href="javascript:;">
                        <p>¥ 313.71×3期</p>
                        <p class="zt">手续费¥7.05/期</p>
                    </a>
                    <a href="javascript:;">
                        <p>¥ 160.23×6期</p>
                        <p class="zt">手续费¥6.9/期</p>
                    </a>
                    <a href="javascript:;">
                        <p>¥ 82.41×12期</p>
                        <p class="zt">手续费¥5.75/期</p>
                    </a>
                </div>
                <div>
                    <p>数量</p>
                    <div>
                        <button>-</button>
                        <span id="pnum">1</span>
                        <button>+</button>
                    </div>
                </div>
                <div>
                    <a href="javascript:;" onclick="save_cart()" class="ys_1">加入购物车</a>
                    <a href="javascript:;" class="ys">立即购买</a>
                </div>
                <p>温馨提示： 支持7天无理由退货(拆封后不支持)</p>
            </div>
        </div>

        <div class="detail_2">
            <div class="xt">
                <a href="javascript:;"><img id="img_s1" src=""></a>
            </div>
            <div class="xt">
                <a href="javascript:;"><img id="img_s2" src=""></a>
            </div>
            <div class="xt_2">
                <a href="javascript:;"><img id="img_s3" src=""></a>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="detail_3">
            <h3>推荐商品</h3>
            <div>
                <div>
                    <a href=""><img src="./images/detail/1.png" alt=""></a>
                    <a href="">IE 100 PRO蓝牙套装 </a>
                    <p class="mt">¥<span>1,499</span></p>
                </div>
                <div class="wy">
                    <a href=""><img src="./images/detail/ietw2b.png" alt=""></a>
                    <a href="" class="wy_1">MOMENTUM 真无线二代 HIFI入耳式耳机 黑色</a>
                    <a href="" class="yc">
                        <img src="./images/detail/22.png" alt="">
                        <img src="./images/detail/33.png" alt="">
                    </a>
                    <p>¥<span>2,399</span></p>

                </div>
                <div class="wy">
                    <a href=""><img src="./images/detail/HD600.png" alt=""></a>
                    <a href="" class="wy_1">MOMENTUM Wireless蓝牙无线包耳式耳机 白色 </a>
                    <a href="" class="yc">
                        <img src="./images/detail/44.png" alt="">
                        <img src="./images/detail/55.png" alt="">
                    </a>
                    <p>¥<span>2,999</span></p>
                </div>
                <div>
                    <a href=""><img src="./images/detail/M33-1.png" alt=""></a>
                    <a href="">IE 80S BT发烧级高保真蓝牙入耳式耳机 </a>
                    <p class="mt_2">¥<span>2,899</span></p>
                </div>
                <div>
                    <a href=""><img src="./images/detail/2.png" alt=""></a>
                    <a href="">HD 600 HiFi专业立体声耳机 </a>
                    <p class="mt">¥<span>2,299</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="container_2">
        <div class="detail_4">
            <div>
                <p><a href="" class="fz_18">所有商品</a></p>
                <p><a href="" class="fz_18">新品首发</a></p>
                <ul>
                    <li><a href="" class="fz_18">无线系列</a></li>
                    <li><a href="">真无线</a></li>
                    <li><a href="">颈挂入耳</a></li>
                    <li><a href="">降噪头戴</a></li>
                </ul>
                <ul>
                    <li><a href="" class="fz_18">HIFI系列</a></li>
                    <li><a href="">旗舰入耳</a></li>
                    <li><a href="">耳机前端</a></li>
                    <li><a href="">家庭音影</a></li>
                </ul>
                <ul>
                    <li><a href="" class="fz_18">音乐娱乐</a></li>
                    <li><a href="">旅行降噪</a></li>
                    <li><a href="">运动健身</a></li>
                </ul>

                <ul>
                    <li><a href="" class="fz_18">通讯系列</a></li>
                    <li><a href="">监听系列</a></li>
                    <li><a href="">蓝牙耳机</a></li>
                    <li><a href="">有线耳机</a></li>
                    <li><a href="">PC耳机</a></li>
                </ul>

                <ul>
                    <li><a href="" class="fz_18">麦克风</a></li>
                    <li><a href="">人声话筒</a></li>
                    <li><a href="">乐器话筒</a></li>
                    <li><a href="">摄像话筒</a></li>
                    <li><a href="">会议全向麦</a></li>
                </ul>
                <ul>
                    <li><a href="" class="fz_18">游戏系列</a></li>
                    <li><a href="">游戏耳机</a></li>
                    <li><a href="">扩音器</a></li>
                </ul>
                <ul>
                    <li><a href="" class="fz_18">耳机配件</a></li>
                    <li><a href="">耳垫</a></li>
                    <li><a href="">头棉</a></li>
                    <li><a href="">耳机线</a></li>
                    <li><a href="">耳机盒</a></li>
                    <li><a href="">耳机单元</a></li>
                </ul>
            </div>
            <div>
                <div>
                    <p><a href="" class="fz_18">商品详情</a></p>
                    <p><a href="" class="fz_18">规格参数</a></p>
                    <p><a href="" class="fz_18">晒单评价</a></p>
                </div>
                <div class="zp">
                    <img src="./images/products/1/8/1/detail.png">
                </div>
            </div>
        </div>
    </div>

    <!-- 尾部 -->
    <iframe src="./footer.html" width="100%" frameborder="0" scrolling="no" height="414px"></iframe>

    <script src="./js/head.js"></script>
    <script src="./js/detail.js"></script>
</body>

</html>